import React from 'react';
import { Box, Card, CardContent, List, ListItem, ListItemAvatar, ListItemText, Avatar, Typography, TextField, Button, Divider } from '@mui/material';

const ChatPage = () => {
  const [chatList] = React.useState([
    { id: 1, avatar: 'https://via.placeholder.com/40', name: '好友A', message: '晚上一起吃饭吗？', time: '10:30' },
    { id: 2, avatar: 'https://via.placeholder.com/40', name: '兴趣群', message: '明天活动报名截止', time: '09:20' }
  ]);
  const [messages, setMessages] = React.useState([
    { id: 1, text: '你好呀！', isMe: false },
    { id: 2, text: '最近怎么样？', isMe: false },
    { id: 3, text: '挺好的，谢谢关心～', isMe: true }
  ]);
  const [inputText, setInputText] = React.useState('');

  const handleSendMessage = () => {
    if (inputText.trim()) {
      setMessages([...messages, { id: Date.now(), text: inputText, isMe: true }]);
      setInputText('');
    }
  };

  return (
    <Box sx={{ maxWidth: '1200px', margin: '0 auto', padding: '20px', display: 'flex', gap: '20px' }}>
      {/* 聊天列表 */}
      <Card variant="outlined" sx={{ minWidth: '300px' }}>
        <CardContent>
          <Typography variant="h6" sx={{ color: '#2c3e50', marginBottom: 2 }}>聊天列表</Typography>
          <List>
            {chatList.map((chat) => (
              <ListItem key={chat.id} alignItems="center" sx={{ cursor: 'pointer' }}>
                <ListItemAvatar>
                  <Avatar src={chat.avatar} />
                </ListItemAvatar>
                <ListItemText
                  primary={chat.name}
                  secondary={
                    <React.Fragment>
                      <Typography component="span" variant="body2" sx={{ color: '#7f8c8d' }}>
                        {chat.message}
                      </Typography>
                      {' · '}
                      <Typography variant="body2" sx={{ color: '#7f8c8d', fontSize: '0.8em' }}>
                        {chat.time}
                      </Typography>
                    </React.Fragment>
                  }
                />
              </ListItem>
            ))}
          </List>
        </CardContent>
      </Card>

      {/* 聊天窗口 */}
      <Card variant="outlined" sx={{ flexGrow: 1 }}>
        <CardContent sx={{ padding: '20px', height: '600px', display: 'flex', flexDirection: 'column' }}>
          <Typography variant="h6" sx={{ color: '#2c3e50', marginBottom: 2 }}>好友A</Typography>
          <Divider sx={{ margin: '10px 0' }} />
          <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>
            {messages.map((msg) => (
              <Box key={msg.id} sx={{ display: 'flex', justifyContent: msg.isMe ? 'flex-end' : 'flex-start', margin: '8px 0' }}>
                <Box sx={{ maxWidth: '70%', padding: '8px 12px', borderRadius: '12px', backgroundColor: msg.isMe ? '#2196F3' : '#f0f0f0' }}>
                  <Typography sx={{ color: msg.isMe ? 'white' : '#2c3e50' }}>{msg.text}</Typography>
                </Box>
              </Box>
            ))}
          </Box>
          <Box sx={{ display: 'flex', gap: '10px', marginTop: '20px' }}>
            <TextField
              fullWidth
              value={inputText}
              onChange={(e) => setInputText(e.target.value)}
              onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
              placeholder="输入消息..."
              variant="outlined"
            />
            <Button variant="contained" onClick={handleSendMessage}>发送</Button>
          </Box>
        </CardContent>
      </Card>
    </Box>
  );
};

export default ChatPage;